<template>
	<view>
		<view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="equipment_name">
					<view class="equipment_form_item">
						<view class="title">设备名称</view>
						<input class="uni-input" name="cn_name" placeholder="请输入设备名称" />
					</view>
					<view class="equipment_form_item">
						<view class="title">设备英文</view>
						<input class="uni-input" name="en_name" placeholder="请输入设备英文名称" />
					</view>
					<view class="equipment_form_item">
						<view class="title">设备图标</view>
						<button type="default" @click="chooseImg">点击上传</button>
					</view>
					<view class="equipment_form_item">

					</view>
				</view>

				<view class="text">
					<text>设备设置</text>
					<text>(暂只支持MQTT协议)</text>
				</view>

				<view class="equipment_name">
					<view class="equipment_form_item">
						<view class="title">设备状态</view>
						<picker mode="selector" :value="index" :range="array" @change="bindPickerChange" name="status">
							<view class="selector">{{ array[index] }}</view>
						</picker>
					</view>
					<view class="equipment_form_item">

					</view>
					<view class="equipment_form_item">
						<view class="title">设备开命令</view>
						<input class="uni-input" name="open_order" placeholder="请输入设备名称" />
					</view>
					<view class="equipment_form_item">
						<view class="title">设备关命令</view>
						<input class="uni-input" name="close_order" placeholder="请输入设备名称" />
					</view>
					<view class="equipment_form_item" v-if="index == 1 ? true : false" >
						<view class="title">设备停命令</view>
						<input class="uni-input" name="stop_order" placeholder="请输入设备名称" />
					</view>
					<view class="equipment_form_item" v-if="index == 1 ? true : false">

					</view>
					<view class="equipment_form_item">
						<view class="title">状态查询命令（可选）</view>
						<input class="uni-input" name="search_order" placeholder="请输入设备名称" />
					</view>
					<view class="equipment_form_item">

					</view>
				</view>

				<view class="uni-btn-v">
					<button form-type="submit">提交</button>
					<button form-type="reset">重置</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				array: ['二状态', '三状态'],
				index: 0
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				uni.showModal({
					content: '表单数据内容：' + JSON.stringify(formdata),
					showCancel: false
				});
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: res => {
						console.log(res.tempFilePaths)
						// uni.uploadFile({
						// 	url: '后端接口地址',
						// 	filePath: res.tempFilePaths[0],
						// 	header: {
						// 		'Authorization': 'Bearer ' + token.access_token,
						// 		"Content-Type": "multipart/form-data",
						// 	},
						// 	formData: {
						// 		id: 123 // 后端接收的其他参数
						// 	},
						// 	name: 'file', // 后端接收的文件名
						// 	complete: (res) => {
						// 		console.log('res', res)
						// 	}
						// })
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.equipment_name {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.equipment_form_item {
			width: 300rpx;
			margin-top: 25rpx;

			.title {
				font-size: 28rpx;
			}

			input,
			button, .selector {
				width: 300rpx;
				height: 60rpx;
				margin-top: 10rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 60rpx;
				border-radius: 15rpx;
				box-shadow: 0 1px 2px rgba(150, 150, 150, .3);
				background-color: #FFFFFF;
			}
			
		}
	}

	.text {
		margin: 30rpx 0 0 35rpx;

		text {
			&:first-child {
				margin-right: 15rpx;
				font-size: 30rpx;
			}

			&:last-child {
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.uni-btn-v {
		position: absolute;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);
		letter-spacing: 10rpx;

		button {
			color: #fff;
			width: 300rpx;
			height: 60rpx;
			line-height: 60rpx;
			&:first-child {

				background-color: #0070d9;
			}

			&:last-child {
				margin-top: 30rpx;
				background-color: #3ccdad;
			}
		}
	}
</style>
